<template>
  <div id="data-view-frame">
    <div id="top-header">
      <div class="center-title" />
      <div class="nav-con">
        <router-link active-class="active" to="map">总体情况</router-link>
        <router-link active-class="active" to="bzzy">编制资源</router-link>
        <router-link active-class="active" to="zzbz">周转编制</router-link>
        <router-link active-class="active" to="bdfx">比对分析</router-link>
        <router-link active-class="active" to="ywfx">业务统计</router-link>
        <router-link active-class="active" to="earlywarning"
          >问题预警</router-link
        >
      </div>
      <el-select v-model="userDepCode" @change="chooseDep" placeholder="请选择">
        <el-option
          v-for="item in depSelArray"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 如果不加后面参数，路由结构没变化网页不会刷新 -->
    <router-view :depCode="userDepCode" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  name: 'Frames',
  props: {
    depSelArray: [],
    userDepCode: {
      type: String
    }
  },
  data() {},
  mounted() {
    // this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.map.getChooseDep({})
        console.log(res)

        res.forEach((element) => {
          this.options.push({
            value: element.DEP_CODE,
            label: element.DEP_NAME
          })
        })
        this.depCode = res[0].DEP_CODE
      } catch (error) {
        console.log(error)
      }
    },
    chooseDep(paramCode) {
      this.depCode = paramCode
      this.userDepCode = paramCode
      // this.$router.push({
      //   query: { depCode: this.depCode }
      // })
    }
  }
}
</script>

<style lang="scss">
#data-view-frame {
  width: 100%;
  height: 100%;
  background-image: url('~@/assets/img/bg5.jpg');
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
}

#top-header {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;

  .center-title {
    position: absolute;
    width: 1850px;
    height: 80px;
    background-image: url('~@/assets/img/navbg.png');
  }

  .nav-con {
    position: absolute;
    top: 0px;
    left: 636px;
    line-height: 74px;
  }

  .nav-con a {
    float: left;
    line-height: 74px;
    padding: 0px 20px;
    font-size: 18px;
    text-decoration: none;
    color: #fff;
  }

  a {
    text-decoration: none;
  }

  .nav-con > a.active,
  .nav-con > a:hover {
    background: url('~@/assets/img/overbg.png') no-repeat top;
    color: #37fff3;
  }

  .el-select {
    width: 200px;
    position: absolute;
    right: 30px;
    line-height: 74px;
    .el-input--suffix {
      > input {
        background-color: #133596;
        color: #83a8f4;
        border: 1px solid #83a8f4;
        border-radius: 16px;
        height: 32px;
      }
      .el-select__caret {
        font-size: 14px;
      }
      .el-input__icon {
        line-height: 32px;
      }
    }
  }
  .el-select-dropdown__wrap {
    max-height: 540px;
  }
}
</style>
